import React from "react"
import {Col, Row} from "antd"
import {Link} from "react-router-dom"
import Card from "../../components/card"
import Team from "../../components/team"
import News from "../../components/news"
import Transition from "../../components/transition"
//    
import "./index.less"
export default class Home extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            prjectList: [
                {
                    url: "https://jzbl-pic.oss-cn-shanghai.aliyuncs.com/buildingcircle/4f4c16b4-8451-49de-a5ca-be1dcd5faefe/2020-07-23/f/tQhAGp6XMp1595495624.jpg",
                    name: "金科合肥瑶海",
                    attr: "住宅建筑"
                },
                {
                    url: "https://jzbl-pic.oss-cn-shanghai.aliyuncs.com/buildingcircle/4f4c16b4-8451-49de-a5ca-be1dcd5faefe/2020-07-23/f/s3wGdHbpC41595497121.jpg",
                    name: "郑州金科中心",
                    attr: "公共建筑"
                },
                {
                    url: "https://jzbl-pic.oss-cn-shanghai.aliyuncs.com/buildingcircle/4f4c16b4-8451-49de-a5ca-be1dcd5faefe/2020-07-23/f/7QH6sTD5pp1595497056.jpg",
                    name: "金科集美阳光",
                    attr: "住宅建筑"
                },
                {
                    url: "https://jzbl-pic.oss-cn-shanghai.aliyuncs.com/buildingcircle/4f4c16b4-8451-49de-a5ca-be1dcd5faefe/2020-07-23/f/tQhAGp6XMp1595495624.jpg",
                    name: "金科合肥瑶海",
                    attr: "住宅建筑"
                },
                {
                    url: "https://jzbl-pic.oss-cn-shanghai.aliyuncs.com/buildingcircle/4f4c16b4-8451-49de-a5ca-be1dcd5faefe/2020-07-23/f/tQhAGp6XMp1595495624.jpg",
                    name: "金科合肥瑶海",
                    attr: "住宅建筑"
                },
                {
                    url: "https://jzbl-pic.oss-cn-shanghai.aliyuncs.com/buildingcircle/4f4c16b4-8451-49de-a5ca-be1dcd5faefe/2020-07-23/f/tQhAGp6XMp1595495624.jpg",
                    name: "金科合肥瑶海",
                    attr: "住宅建筑"
                },
                {
                    url: "https://jzbl-pic.oss-cn-shanghai.aliyuncs.com/buildingcircle/4f4c16b4-8451-49de-a5ca-be1dcd5faefe/2020-07-23/f/tQhAGp6XMp1595495624.jpg",
                    name: "金科合肥瑶海",
                    attr: "住宅建筑"
                },
                {
                    url: "https://jzbl-pic.oss-cn-shanghai.aliyuncs.com/buildingcircle/4f4c16b4-8451-49de-a5ca-be1dcd5faefe/2020-07-23/f/tQhAGp6XMp1595495624.jpg",
                    name: "金科合肥瑶海",
                    attr: "住宅建筑"
                }
            ],
            partner:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        }
    }
    componentWillMount () {
        console.log("挂在前。。。componentWillMount")
    }
    componentDidMount () {
        console.log("挂在后。。。componentDidMount")
    }
    render() {
        return (<div className="home">
        <div className="home-bg">
            <div className="home-banner">
                <Transition enterTimeout={5000}>
                    <h2 className="animate__animated animate__fadeInDown" key="amache">创新 . 谋略</h2>
                </Transition>
                <Transition enterTimeout={5000}>
                    <p className="animate__animated animate__fadeInLeft" key="amache">INNOVATION . STRATEGY</p>
                </Transition>
                <Transition enterTimeout={5000}>
                    <div className="home-banner-sub animate__animated animate__fadeInUp" key="amache">创谋建筑经过多年的发展，形成了自
                        己特有的一套工作方法和工作模式，保证了创谋建筑可以提供高效专业且优质的设计服务。让我们在设计服务 的市场上形成了极具竞争力的优势...</div>
                </Transition>
                <div className="home-banner-view">
                    <span className="jz_btn">VIEM MORE</span>
                </div>
            </div>
            <div className="home-news">
                <div className="home-item-cen">
                    <div className="protit">
                        <div className="protit-left">
                            <p>业务范围</p>
                            <span>Business Scope</span>
                        </div>
                        <div className="protit-right">
                            <span className="jz_btn">查看更多</span>
                        </div>
                    </div>
                    <div>
                    <Row gutter={[16, 16]}>
                        <Col lg={12}>
                            <News></News>
                        </Col>
                        <Col lg={12}>
                            <News></News>
                        </Col>
                        <Col lg={12}>
                            <News></News>
                        </Col>
                        <Col lg={12}>
                            <News></News>
                        </Col>
                    </Row>
                    </div>
                </div>
            </div>
            <div className="pro">
                <Row className="pro-title" justify="space-around" align="middle">
                    <Col xl={3}>
                        <div className="pro-title-name">
                            <h3>项目案例</h3>
                            <span>Project</span>
                        </div>
                    </Col>
                    <Col xl={9}></Col>
                    <Col xl={12}>
                        <ul className="pro-title-item">
                            <li><Link to="case/all">全部</Link></li>
                            <li><Link to="case/all">住宅建筑</Link></li>
                            <li><Link to="case/all">公共建筑</Link></li>
                            <li><Link to="case/all">规划设计</Link></li>
                            <li><Link to="case/all">查看更多</Link></li>
                        </ul>
                    </Col>
                </Row>
            </div>
            <div className="home-card">
                <div className="home-card-box jz_padding_btm">
                    <Row gutter={[16, 16]}>
                        {
                            this.state.prjectList.map((ele, index) => {
                                return  (
                                    <Col xl={6} key={index}>
                                        <Card item={ele}></Card>
                                    </Col>
                                )
                            })
                        }
                    </Row>
                </div>
            </div>
        </div>
        <div className="home-about">
           <div className="about">
            <div className="about-tit">
                <h2>关于我们</h2>
                <p>About</p>
            </div>
            <div className="about-sub">
                <p> 上海创谋建筑设计有限公司完成了多个国内知名地产商（绿地，万科，保利，金地，中海，金科，瑞 安，阳光城等） 众多成功项目，赢得业主及同行的尊重和赞誉。基于对城市的关注，无论是在公共建 筑还是住宅开发领域， 上海创谋建筑设计有限公司的作品都力图在城市的记忆中留下令人振奋的精神 财富。公司业务范围涉及建筑设计、房地产咨询等领域， 并在居住区规划、高档住宅社区、城市综合 体、集群商业、高档写字楼、文化旅游项目等方面形成了专业优势</p>
            </div>
            <div>
                <span className="jz_btn">More</span>
            </div>
           </div>
      </div>
        <div className="home-item">
            <div className="home-item-cen">
                <div className="protit">
                    <div className="protit-left">
                        <p>精英团队</p>
                        <span>Team</span>
                    </div>
                    <div className="protit-right">
                        <span className="jz_btn">More</span>
                    </div>
                </div>
                <div>
                <Row gutter={[16, 16]}>
                    <Col lg={12}>
                        <Team></Team>
                    </Col>
                    <Col lg={12}>
                        <Team></Team>
                    </Col>
                    <Col lg={12}>
                        <Team></Team>
                    </Col>
                    <Col lg={12}>
                        <Team></Team>
                    </Col>
                </Row>
                </div>
            </div>
            
        </div>
        <div className="home-news">
            <div className="home-item-cen">
                <div className="protit">
                    <div className="protit-left">
                        <p>新闻咨询</p>
                        <span>News</span>
                    </div>
                    <div className="protit-right">
                        <span className="jz_btn">More</span>
                    </div>
                </div>
                <div>
                <Row gutter={[16, 16]}>
                    <Col lg={12}>
                        <News></News>
                    </Col>
                    <Col lg={12}>
                        <News></News>
                    </Col>
                    <Col lg={12}>
                        <News></News>
                    </Col>
                    <Col lg={12}>
                        <News></News>
                    </Col>
                </Row>
                </div>
            </div>
        </div>
        <div className="home-item">
            <div className="home-item-cen">
                <div className="protit">
                    <div className="protit-left">
                        <p>合作伙伴</p>
                        <span>Cooperative partner</span>
                    </div>
                    <div className="protit-right">
                    </div>
                </div>
                <div>
                <Row gutter={[16, 16]}>
                    {
                        this.state.partner.map((ele, index) => {
                            return (
                                <Col flex={2} key={index}>  
                                    <div className="partner">
                                        <img src="http://v1.cdn-static.cn/2017/4/17/1765_j1lx1xxh.png?imageView2/2/w/202/q/100" alt=""/>
                                    </div>
                                </Col>
                            )
                        })
                    }
                </Row>
                </div>
            </div>
        </div>
    </div>);
    }
}